<template>
  <el-dialog
    :visible.sync="showDialog"
    width="800px"
    append-to-body
    :lock-scroll="false">
    <template slot="title">
      <h3 class="title">选择数据源</h3>
    </template>
    <dl v-for="(item, index) in dataSource" :key="index" class="group">
      <dt class="group-title-cnt">
        <el-checkbox
          :indeterminate="item.indeterminate"
          v-model="item.checked"
          @change="handleCheckAllChange(item)">{{$t(item.label)}}</el-checkbox>
      </dt>
      <dd class="group-container">
        <ul class="group-world">
          <li v-for="(ite, index2) in item.children" :key="index2">
            <el-checkbox
              :indeterminate="ite.indeterminate"
              v-model="ite.checked"
              @change="handleCheckCountry(ite, item)"
              class="checkbox-cnt">
              <span class="label-cnt">
                <svg v-if="ite.icon" class="icon" aria-hidden="true">
                  <use :xlink:href="ite.icon"></use>
                </svg>
                <svg v-else style="width:0;height:2.5em;"></svg>
              </span>
              {{$t(ite.label)}}
            </el-checkbox>
            <p class="children">
              <span 
                v-for="(child, index3) in ite.children"
                :key="index3"
                :class="{'checked': child.checked}"
                @click="chooseChild(!child.checked, index3, ite, item)">{{$t(child.label)}}</span>
            </p>
          </li> 
        </ul>
      </dd>
    </dl>
    
    <span slot="footer" class="dialog-footer">
      <button class="btn confirm-btn" @click="chooseDataSource">确定</button>
      <button class="btn cancel-btn" @click="resetDataSource">重置</button>
    </span>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
import DataSource from '@/utils/mock/dataSource.json'
export default {
  props: {
    openDataSource: {
      type: Boolean
    }
  },
  data() {
    return {
      showDialog: false,
      dataSource: [],
    }
  },
  computed: {
    ...mapState(['dataSourceJSON'])
  },
  methods: {
    init() {
      this.showDialog = true
    },
    // 勾选国家
    handleCheckCountry(ite, item) {
      let children = ite.children || []
      if (children.length > 0) {
        children.forEach(v => {
          v.checked = ite.checked
        })
        let check = ite.children.filter(v => v.checked)
        let unCheck = ite.children.filter(v => !v.checked)
        if (unCheck.length<=0) {
          ite.indeterminate = false
        } else {
          ite.indeterminate = check.length > 0
        }
      }

      let itemCheck = item.children.filter(v => v.checked)
      let unItemCheck = item.children.filter(v => !v.checked)

      if (item.label === this.dataSource[0].label) {
        // 如果都未勾选，则默认勾选第一个子项
        if (unItemCheck.length === item.children.length) {
          item.children[0].children[0].checked = true
          item.children[0].indeterminate = true
          item.indeterminate = ''
        }
        if (unItemCheck.length === item.children.length) {
          item.checked = false
          item.indeterminate = true
        } else if (itemCheck.length === item.children.length) {
          item.checked = true
          item.indeterminate = false
        } else {
          item.checked = false
          item.indeterminate = ''
        }
      } else {
        if (unItemCheck.length === item.children.length) {
          item.checked = false
          item.indeterminate = true
        } else if (itemCheck.length === item.children.length) {
          item.checked = true
          item.indeterminate = false
        } else {
          item.checked = false
          item.indeterminate = ''
        }
      }
    },
    // 勾选国家子项
    chooseChild(isChecked, index, ite, item) {
      let loc = this.dataSource[0].children.indexOf(ite)
      ite.children[index].checked = isChecked
      // 是否全部勾选
      let check = ite.children.filter(v => v.checked)
      let unCheck = ite.children.filter(v => !v.checked)
      if (unCheck.length<=0) {
        ite.indeterminate = false
        ite.checked = true
      } else {
        // 如果第一个国家子项全部未选中，则默认勾选第一个子项
        if ((unCheck.length === ite.children.length) && (loc === 0)) {
          ite.children[0].checked = true
          check = ite.children.filter(v => v.checked)
        }
        ite.indeterminate = check.length > 0
        ite.checked = false
      }

      let itemCheck = item.children.filter(v => v.checked)
      let unItemCheck = item.children.filter(v => !v.checked)
      if (unItemCheck.length === item.children.length) {
        item.checked = false
        item.indeterminate = true
      } else if (itemCheck.length === item.children.length) {
        item.checked = true
        item.indeterminate = false
      } else {
        item.checked = false
        item.indeterminate = ''
      }
    },
    // 全选
    handleCheckAllChange(item) {
      let checked = item.checked
      item.children.forEach((v, i) => {
        v.checked = checked
        if (v.children) {
          v.children.forEach(child => {
            child.checked = checked
          })
          let check = v.children.filter(child => child.checked)
          let unCheck = v.children.filter(child => !child.checked)
          if (unCheck.length<=0) {
            v.indeterminate = false
          } else {
            // 如果第一个国家子项全部未选中，则默认勾选第一个子项
            if (item.label === this.dataSource[0].label) {
              if ((unCheck.length === v.children.length) && (i === 0)) {
                v.children[0].checked = true
                check = v.children.filter(child => child.checked)
              }
            }
            v.indeterminate = check.length > 0
          }
        }
      })

      let allIndeterminate = item.children.filter(v => v.indeterminate)
      if (allIndeterminate.length > 0) {
        item.indeterminate = true
      } else {
        item.indeterminate = false
      }
    },
    // 确定
    chooseDataSource() {
      let d = this.dataSource
      let list = []
      d.forEach(v => {
        let children = v.children
        children.forEach(j => {
          let child = j.children
          if (child) {
            child.forEach(k => {
              if (k.checked) {
                list.push(k)
              }
            })
          } else {
            if (j.checked) {
              list.push(j)
            }
          }
        })
      })

      // let data = {
      //   showDialog: false
      // }
      this.$store.commit('setDataSourceJSON', d)
      this.createSq(list)
      this.showDialog = false
    },
    createSq(data) {
      let str = ''
      let countryArr = []
      data.forEach(v => {
        if (v.country) {
          countryArr.push(v.country)
        }
      })
      countryArr = Array.from(new Set(countryArr))

      let strArr = []
      for (let i in countryArr) {
        let str1 = `nd/${countryArr[i] }`
        // 类型
        let typeStr = []
        for (let j in data) {
          if (countryArr[i] === data[j].country) {
            if (data[j].type) {
              typeStr.push(data[j].type)
            }
          }
        }
        // 类型前缀
        let s = ''
        if (typeStr.length > 0 && typeStr.length < 3) {
          if (typeStr.length <= 1) {
            s = 'na/'
          } else {
            s = 'nas/'
          }
        }
        // 单个拼接
        let singleStr = str1
        if (s !== '') {
          singleStr += ' and ' + s + typeStr.join(' ')
          singleStr = '(' + singleStr + ')'
        }
        strArr.push(singleStr)
      }
      str = strArr.join(' or ')
      
      if (data.length === 28) {
        str = ''
        // this.createSq(list)
      }


      this.$store.commit('setCreateSq', str)
      // this.$emit('createSq', str)
      this.showDialog = false
    },
    // 重置
    resetDataSource() {
      this.$confirm('您确定要重置吗？', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataSource = JSON.parse(JSON.stringify(DataSource))
        let d0 = this.dataSource[0]
        d0.checked = false
        this.handleCheckAllChange(d0)
      }).catch(err => {})
    },
    
  },
  watch: {
    dataSource: {
      handler() {
      },
      deep: true
    },
    openDataSource() {
      this.showDialog = this.openDataSource
    }
  },
  mounted() {
    if (this.dataSourceJSON.length > 0) {
      this.dataSource = this.dataSourceJSON
    } else {
      this.dataSource = DataSource // JSON.parse(JSON.stringify(DataSource))
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  color: $mainColor;
}
.group {
  &:nth-of-type(2) {
    li {
      &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4) {
        float: left;
      }
    }
  }
}
.group-title-cnt {
  line-height: 40px;
}
.group-container {
  .group-world {
    list-style: none;
    li {
      display: flex;
      align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid $color2;
      &:nth-of-type(8), &:nth-of-type(9), &:nth-of-type(10),
      &:nth-of-type(12), &:nth-of-type(13), &:nth-of-type(14),
      &:nth-of-type(16), &:nth-of-type(17), &:nth-of-type(18) {
        float: left;
      }
      .checkbox-cnt {
        width: 150px;
        padding-top: 4px;
      }
      .label-cnt {
        display: inline-block;
        vertical-align: middle;
        .icon {
          width: 2.5em;
          height: 2.5em;
          margin-right: 5px;
        }
      }
      .children {
        flex: 1;
        font-size: 12px;
        span {
          display: inline-block;
          min-width: 100px;
          padding: 6px 0;
          border: 1px solid $color141;
          border-radius: 3px;
          margin: 5px 10px;
          text-align: center;
          color: $color143;
          cursor: pointer;
          &.checked {
            color: #fff;
            background-color: $mainColor !important;
          }
        }
      }
    }
  }
}
.dialog-footer {
  .btn {
    padding: 6px 20px;
    border-radius: 30px;
    margin: 0 10px;
    font-size: initial;
    cursor: pointer;
  }
  .confirm-btn {
    border: 1px solid $mainColor;
    color: #fff;
    background-color: $mainColor;
  }
  .cancel-btn {
    border: 1px solid $mainColor;
    color: $mainColor;
    background-color: transparent;
  }
}
::v-deep {
  .el-dialog__body {
    padding-top: 0 !important
  }
}

</style>